<template>
  <view class="container">
    <view class="section">
      <text class="title">本地图片选择预览</text>
      <button @click="chooseLocalImage" type="primary" class="btn">选择本机图片</button>
      <button @click="previewSelectedImage" type="default" class="btn" :disabled="!selectedImage">预览图片</button>
      <image :src="selectedImage" mode="widthFix" class="image-preview" v-if="selectedImage" />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedImage: ''
    };
  },
  methods: {
    chooseLocalImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album'],
        success: (res) => {
          this.selectedImage = res.tempFilePaths[0];
        },
        fail: (err) => {
          console.error('本地图片选择失败：', err);
        }
      });
    },
    previewSelectedImage() {
      if (!this.selectedImage) return;
      uni.previewImage({
        urls: [this.selectedImage],
        current: this.selectedImage
      });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
}
.section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}
.title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  display: block;
}
.btn {
  margin-bottom: 20rpx;
}
.image-preview {
  width: 100%;
  height: auto;
  border-radius: 8rpx;
  margin-top: 10rpx;
}
</style>